<div class="card card-accent-info">
  <div class="card-body">
    <h4 class="card-title">Some ECharts event-emitters</h4>
    <div class="mt-4">
      <tabset>
        <tab heading="demo">
          <div echarts [options]="options" class="demo-chart"
            (chartInit)="onChartEvent($event, 'chartInit')"
            (chartClick)="onChartEvent($event, 'chartClick')"
            (chartDblClick)="onChartEvent($event, 'chartDblClick')"
            (chartMouseDown)="onChartEvent($event, 'chartMouseDown')"
            (chartMouseUp)="onChartEvent($event, 'chartMouseUp')"
            (chartMouseOver)="onChartEvent($event, 'chartMouseOver')"
            (chartMouseOut)="onChartEvent($event, 'chartMouseOut')"
            (chartGlobalOut)="onChartEvent($event, 'chartGlobalOut')"
            (chartContextMenu)="onChartEvent($event, 'chartContextMenu')"
            (chartDataZoom)="onChartEvent($event, 'chartDataZoom')"
          ></div>
        </tab>
        <tab heading="html">
          <markdown [data]="demo_html | language: 'html'"></markdown>
        </tab>
        <tab heading="component">
          <markdown [data]="demo_ts | language: 'typescript'"></markdown>
        </tab>
      </tabset>
    </div>
  </div>
</div>
